<template>
  <div>
      <van-search v-model="value" placeholder="请输入搜索关键词" @input="inputFn" />
      <div>

        <!-- 热搜容器 -->
        <div class="search_wrap" v-if="toggleShow">
          <!-- 标题 -->
          <p class="hot_title">热门搜索</p>
          <!-- 热搜关键词容器 -->
          <div class="hot_name_wrap">
            <!-- 每个搜索关键词 -->
            <span class="hot_item" @click="setValue('北京烟火')">北京烟火</span>
            <span class="hot_item" v-for="(v,i) in hotSearchList" :key="i" @click="setValue(v.first)">{{v.first}}</span>
          </div>
        </div>

        <!-- 搜索结果容器 -->
        <div class="search_wrap" v-else>
          <!-- 标题 -->
          <p class="hot_title">最新匹配</p>
          <!-- 搜索结果容器 -->
          <van-cell-group>
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
              <!-- <van-cell center v-for="v in searchResultList" :key="v.id" :title="v.name" :label="v.ar[0].name+' - '+v.al.name" >
                <template #right-icon>
                  <van-icon name="play-circle-o"  size="0.8rem"/>
                </template>
              </van-cell> -->
              <SongItem v-for="v in searchResultList" :key="v.id" :title="v.name" :label="v.ar[0].name+' - '+v.al.name" :id="v.id"></SongItem>
            </van-list>
          </van-cell-group>
        </div>

      </div>
  </div>
</template>

<script>
import { searchHotListAPI, searchResultAPI } from '@/api'
import SongItem from '@/components/SongItem.vue'
export default {
  components: {
    SongItem
  },
  data () {
    return {
      value: '', // 搜索框内容
      hotSearchList: [], // 热搜关键字列表
      searchResultList: [],
      loading: false, // 状态 - 是否加载中
      finished: false, // 状态 - 加载完毕
      offset: 0, // 偏移量
      timer: null // 防抖变量
    }
  },
  async created () {
    const res = await searchHotListAPI()
    this.hotSearchList = res.data.result.hots
    console.log(res.data)
  },
  methods: {
    // 热搜关键字点击事件
    async setValue (value) {
      this.value = value
      const res = await searchResultAPI({ keywords: value })
      this.searchResultList = res.data.result.songs
      console.log(res.data.result.songs)
    },
    // 搜索框实时改变事件
    async inputFn () {
      if (this.value.trim() === '') return // 防止输入为空
      clearTimeout(this.timer)
      this.timer = setTimeout(async () => {
        const res = await searchResultAPI({ keywords: this.value })
        // 检查是否返回结果
        if (!res.data.result || !res.data.result.songs) {
          this.searchResultList = [] // 如果没有获取到数据则 清空结果数组
        } else {
          this.searchResultList = res.data.result.songs
        }
        console.log(this.searchResultList)

        this.loading = false // 状态 - 是否加载中
        this.finished = false // 状态 - 加载完毕
        this.offset = 0
      }, 500)
    },
    // 触底事件 加载
    async onLoad () {
      console.log('加载触发')
      //
      this.offset += 30
      const res = await searchResultAPI({ keywords: this.value, limit: 30, offset: this.offset })
      console.log('翻页', res.data.result.songCount, res.data.result)

      if (res.data.result.songCount === 0 || this.searchResultList.length === res.data.result.songCount || res.data.result.songs.length < 30) {
        this.finished = true
        return
      }
      this.searchResultList = [...this.searchResultList, ...res.data.result.songs]
      this.loading = false
    }

  },
  computed: {
    // 控制当前显示 热搜关键字 还是显示 搜索结果
    toggleShow () {
      // 文本框为空 或 搜索结果为空  则 不显示搜索列表
      return this.value.length === 0 || this.searchResultList.length === 0
    }
  }
}
</script>

<style scoped>
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}
</style>
